<template>
  <div class="column-manages">
    <div class="tool-bar">
      <el-button type="primary" @click="columnAddEdit('addparam')" size="small">添加参数</el-button>
      <el-button type="danger" @click="deleteprama" size="small">删除参数</el-button>
    </div>
    <el-table
      ref="multipleTable"
      :data="tableData3"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
      @row-click="handleclick"
      :row-class-name="tableRowClassName"
    >
      <el-table-column type="selection"></el-table-column>

      <el-table-column type="index"></el-table-column>

      <el-table-column prop="paramKey" min-width="100" label="参数键"></el-table-column>

      <el-table-column prop="paramValue" width="100" align="center" label="参数值"></el-table-column>

      <el-table-column prop="remark" min-width="200" label="备注"></el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click.stop="handleEdit(scope.$index, scope.row)">修改</el-button>
          <el-button
            size="mini"
            type="danger"
            @click.stop="handleDelete(scope.$index, scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="添加参数设置" :visible.sync="dialogFormVisible">
      <el-form status-icon ref="ruleForm" :model="form" label-width="100px">
        <el-form-item
          label="paramKey:"
          prop="paramKey"
          :rules="{ required: true, message: 'paramKey不能为空'}"
        >
          <el-input v-model="form.paramKey"></el-input>
        </el-form-item>
        <el-form-item
          label="paramValue:"
          prop="paramValue"
          :rules="{ required: true, message: 'paramValue不能为空'}"
        >
          <el-input v-model.number="form.paramValue"></el-input>
        </el-form-item>
        <el-form-item
          label="remark:"
          prop="remark"
          :rules="{ required: true, message: 'remark不能为空'}"
        >
          <el-input v-model="form.remark"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click=" resetForm('ruleForm')">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<style>
.el-table .warning-row {
  background: oldlace;
}
.el-table__body tr.current-row>td{
  background-color: red;
  color: red;
}
</style>
<script>
import axios from "axios";
export default {
  name: "Paramlist",
  data() {
    return {
      noweditid: "",
      paramtype: "add",
      addparam: true,
      tableData3: [{}],
      multipleSelection: [],
      dialogFormVisible: false,
      form: {
        paramKey: "",
        paramValue: "",
        remark: ""
      },
      formLabelWidth: "120px"
    };
  },
  watch: {
    $route(val) {}
  },
  mounted() {
    var that = this;
    that.pramalist();
    //  this.$refs.multipleTable.toggleRowSelection(tableData3[2]);
  },
  created() {},
  methods: {
    // 弹窗确定
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          console.log(this.form);
          if (this.paramtype == "edit") {
            this.addeditprama("edit");
          } else {
            this.addeditprama("addparam");
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 弹窗取消
    resetForm(formName) {
      console.log(this.$refs);
      this.$refs.ruleForm.resetFields();
      this.dialogFormVisible = false;
    },
    // 多选
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 一行的点击
    handleclick(row, event, column) {
      this.$refs.multipleTable.toggleRowSelection(row);
      console.log(row, event, column);
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "warning-row";
      }
      return "";
    },
    // 批量删除
    deleteprama() {
      var that = this;
      console.log(this.multipleSelection);
      if (this.multipleSelection.length == 0) {
        this.$message({
          type: "warning",
          message: "请选择删除项"
        });

        return;
      } else {
        this.$confirm("此操作将永久删除文件, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            console.log("deleteapi");
            that.deleteapi();
          })
          .catch(() => {
            that.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      }
    },
    // 编辑
    handleEdit(index, row) {
      console.log(index, row);
      this.noweditid = row.id;
      console.log(this.noweditid, "当前id");
      // 查询当前要编辑的内容
      this.refeprama(row.id);
    },
    // 单个删除
    handleDelete(index, row) {
      console.log(index, row);
      this.multipleSelection = [];
      this.multipleSelection.push(row);
      this.deleteprama();
    },
    // 添加
    columnAddEdit(handelType) {
      this.paramtype = handelType;
      // 第一次添加没有ruleForm 添加初始清空
      if (this.$refs.ruleForm && handelType == "addparam") {
        this.$refs.ruleForm.resetFields();
      }
      this.dialogFormVisible = true;
    },
    // 查询api
    refeprama(id) {
      let that = this,
        idobj = { id: "" };
      idobj.id = id;
      axios
        .post("http://192.168.7.73:8001/order/param/findparamById", idobj)
        .then(function(response) {
          console.log(response);
          console.log(response.data.data.remark);
          that.form.paramKey = response.data.data.paramKey;
          that.form.paramValue = response.data.data.paramValue;
          that.form.remark = response.data.data.remark;
          console.log(that.form);
          that.columnAddEdit("editparam");
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    // 添加/修改api
    addeditprama() {
      let that = this;
      let data = {
        paramKey: this.form.paramKey,
        paramValue: this.form.paramValue,
        remark: this.form.remark
      };
      this.paramtype == "editparam" ? (data.id = this.noweditid) : data;
      console.log(data);
      axios
        .post("http://192.168.7.73:8001/order/param/save", data)
        .then(function(response) {
          console.log(response);
          that.dialogFormVisible = false;
          that.pramalist();
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    // 批量删除appi
    deleteapi() {
      let that = this;
      let datadelete = [];

      this.multipleSelection.forEach((value, index) => {
        var objdelete = {};
        objdelete.id = value.id;
        datadelete.push(objdelete);
      });

      axios
        .post(
          "http://192.168.7.73:8001/order/param/deleteParamByIds",
          datadelete
        )
        .then(function(response) {
          that.pramalist();
          that.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(function(error) {
          that.$message({
            type: "danger",
            message: "删除失败!"
          });
        });
    },
    // s数据列表
    pramalist() {
      let that = this;
      axios
        .post("http://192.168.7.73:8001/order/param/list")
        .then(function(response) {
          that.tableData3 = response.data;
          console.log(response);
        })
        .catch(function(error) {
          console.log(11111);
        });
    }
  }
};
</script>
<style  scoped>
.column-manages {
  min-width: 940px;
  box-sizing: border-box;
  padding: 20px;
}
.tool-bar {
  padding-bottom: 10px;
  border-bottom: 1px solid #b6b6b6;
}
.el-table .warning-row {
  background: oldlace;
}
</style>
